<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>某个权限对应的资源</title>
    <style type="text/css">
        .lxb-row {
            display: flex;
            align-items: center;
            justify-content: space-around;
        }
    </style>
</head>
<body>
<div class="lxb-row">
    <div>
        <fieldset class="layui-elem-field layui-field-title" style="margin: 0px;">
            <legend>权限已拥有资源</legend>
        </fieldset>
        <table id="ownResTable" class="layui-table" lay-filter="ownResTable">
            <thead>
            <tr>
                <th lay-data="{type: 'numbers', fixed: true}"></th>
                <th lay-data="{type: 'checkbox', fixed: true}"></th>
                <th lay-data="{field: 'id', type:'space', width: '0%', style: 'display: none'}"></th>
                <th lay-data="{field:'name', width:100}">资源名称</th>
                <th lay-data="{field:'url'}">资源URL</th>
                <th lay-data="{field:'urlKey'}">资源KEY</th>
            </tr>
            </thead>
            <tbody>
            <tr th:each="res : ${ownRes}">
                <td></td>
                <td></td>
                <td>[[${res.id}]]</td>
                <td>[[${res.name}]]</td>
                <td>[[${res.url}]]</td>
                <td>[[${res.urlKey}]]</td>
            </tr>
            </tbody>
        </table>
    </div>

    <div style="width: 100px">
        <div style="display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%;">
            <button type="button" class="btn btn-outline-secondary" onclick="rightMove();">
                <i class="layui-icon">&#xe602;</i>
            </button>
            <button type="button" class="btn btn-outline-secondary" onclick="leftMove();">
                <i class="layui-icon">&#xe603;</i>
            </button>
        </div>
    </div>

    <div>
        <fieldset class="layui-elem-field layui-field-title" style="margin: 0px;">
            <legend>其他资源</legend>
        </fieldset>
        <table id="notOwnResTable" class="layui-table" lay-filter="notOwnResTable">
            <thead>
            <tr>
                <th lay-data="{type: 'numbers', fixed: true}"></th>
                <th lay-data="{type: 'checkbox', fixed: true}"></th>
                <th lay-data="{field: 'id', type:'space', width: '0%', style: 'display: none'}"></th>
                <th lay-data="{field:'name', width:100}">资源名称</th>
                <th lay-data="{field:'url'}">资源URL</th>
                <th lay-data="{field:'urlKey'}">资源KEY</th>
            </tr>
            </thead>
            <tbody>
            <tr th:each="res : ${notOwnRes}">
                <td></td>
                <td></td>
                <td>[[${res.id}]]</td>
                <td>[[${res.name}]]</td>
                <td>[[${res.url}]]</td>
                <td>[[${res.urlKey}]]</td>
            </tr>
            </tbody>
        </table>
    </div>
</div>

<script type="text/javascript">
    //转换静态表格
    layui.table.init('ownResTable', {
        height: 400,
        width: 450
    });
    layui.table.init('notOwnResTable', {
        height: 400,
        width: 450
    });

    function leftMove() { // add
        var checkStatus = layui.table.checkStatus('notOwnResTable'); //test即为基础参数id对应的值
        console.log('leftMove', checkStatus.data) // 获取选中行的数据
        if (checkStatus.data.length == 0) {
            layui.layer.msg("您还没选择添加的资源");
            return;
        }
        var resIds = checkStatus.data.map(function (res) {
            return res.id;
        });

        $.post("/admin/authorities/" + selectedAuth.id + "/addRes", {
            'resId': resIds
        }, function (data, textStatus, req) {
            console.log("data = ", data);
            if (data.result == 1) {
                layui.table.reload('notOwnResTable', {
                    'data': data.notOwnRes
                });
                layui.table.reload('ownResTable', {
                    'data': data.ownRes
                });
            }
        });
    }

    function rightMove() { // delete
        var checkStatus = layui.table.checkStatus('ownResTable'); //test即为基础参数id对应的值
        console.log('leftMove', checkStatus.data) // 获取选中行的数据
        if (checkStatus.data.length == 0) {
            layui.layer.msg("您还没选择要删除的资源");
            return;
        }
        var resIds = checkStatus.data.map(function (res) {
            return res.id;
        });

        $.ajax("/admin/authorities/" + selectedAuth.id + "/res", {
            type: 'post',
            data: {
                'resId': resIds,
                '_method': 'delete'
            },
            dataType: "json", // 预期服务器返回的数据类型
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                layui.layer.msg('删除出错了');
            },
            success: function (data, textStatus, jqXHR) {
                console.log("data = ", data);
                if (data.result == 1) {
                    layui.table.reload('notOwnResTable', {
                        'data': data.notOwnRes
                    });
                    layui.table.reload('ownResTable', {
                        'data': data.ownRes
                    });
                } else {
                    layui.layer.msg(data.msg);
                }
            }
        });
    }
</script>
</body>
</html>